floating language box

            <div>
                <!-- Floating Language Box -->
                <div id="language-box" class="floating-box">
                    <h3>Language</h3>
                    <button class="lang-btn" data-lang="en">English</button>
                    <button class="lang-btn" data-lang="nl">Nederlands</button>
                    <button class="lang-btn" data-lang="fr">Français</button>
                </div>
                <div id="nederlands" data-lang="nl" style="display:block;">Dit is een tekst in het Nederlands.</div>
                <div id="english" data-lang="en" style="display:block;">This is a text in English.</div>
                <div id="chinese" data-lang=zh-Hans" style="display:block;">Ceci est un texte en français</div>
            </div>
            <style>
                /* styles.css */
                body { font-family: Arial, sans-serif;  margin: 0; padding: 0; }
                .floating-box { position: fixed;top: 20px; right: 20px; width: 100px; background-color: #fff; border: 1px solid #ccc;
                border-radius: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 15px; text-align: center; z-index: 1000; }
                .floating-box h3 { margin: 0 0 10px; font-size: 16px;}
                .lang-btn {display: block; width: 100%; margin: 5px 0; padding: 8px; background-color: #007bff; color: white; border: none;  border-radius: 3px; cursor: pointer; font-size: 14px;}
                .lang-btn:hover {background-color: #0056b3;}
            </style>
            <script>
                // Function to update the language
                function setLanguage(lang) {
                    localStorage.setItem('selectedLanguage', lang);
                // Example: Update the page content based on the selected language
                    if (lang === 'en') {
                        document.body.style.backgroundColor = '#f0f0f0';
                        alert('Language set to English');
                        let en = document.getElementById("english");
                        en.style.display == "block" ? en.style.display = "none" : en.style.display = "block"; 
                    } else if (lang === 'nl') {
                        document.body.style.backgroundColor = '#e0e0ff';
                        alert('Taal ingesteld op Nederlands');
                        let nl = document.getElementById("nederlands");
                        nl.style.display == "block" ? nl.style.display = "none" : nl.style.display = "block"; 
                    } else if (lang === 'fr') {
                        document.body.style.backgroundColor = '#ffe0e0';
                        alert('Langue définie sur Français');
                        let fr = document.getElementById("chinese");
                        fr.style.display == "block" ? fr.style.display = "none" : fr.style.display = "block"; 
                    }
                }
                // Event listeners for language buttons
                document.addEventListener('DOMContentLoaded', () => {
                    const langButtons = document.querySelectorAll('.lang-btn');
                    langButtons.forEach(button => {
                        button.addEventListener('click', () => {
                        const lang = button.getAttribute('data-lang');
                        setLanguage(lang);
                        });
                    });
    
                // Load saved language from localStorage (if any)
                const savedLang = localStorage.getItem('selectedLanguage');
                if (savedLang) {
                    setLanguage(savedLang);
                }
                });
            </script>